<template>
  <div>
    <div
      style="
        height: 74px;
        background-color: #35353f;
        display: flex;
        color:#fff;
        align-items: center;
        padding: 0 10px;
      "
    >
      <div>
        <div style="display: flex; align-items: center">
          <img src="@/assets/images/shangcheng.png" alt="" style="width: 40px;height: 40px;border-radius: 50%" />
          <div style="font-weight: bold; font-size: 20px; margin-left: 5px">
            商品管理系统
          </div>
        </div>
      </div>
      <div
        style="
          width: fit-content;
          padding-right: 10px;
          display: flex;
          align-items: center;
          margin-left: auto;
        "
      >
        <img
          src="@/assets/images/my.jpg"
          alt=""
          style="width: 40px; height: 40px;border-radius: 50%"
        />
        <span style="margin-left: 10px">{{ userStore.userInfo.name }}</span>
        <el-dropdown>
    <span class="el-dropdown-link">
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <RouterLink class="entry" to="/">
          <el-dropdown-item>用户前台</el-dropdown-item>
        </RouterLink>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
      </div>
    </div>

    <div style="display: flex">
      <div
        style="
          width: 200px;
          background-color: #666;
          min-height: calc(100vh - 75px);
        "
      >
        <el-menu
          router
          active-text-color="#ffd04b"
          background-color="#666"
          class="el-menu-vertical-demo"
          text-color="#fff"
          style="border: none"
          :default-active="$route.path"
          :default-openeds="['/home', '2']"
        >
          <el-menu-item index="/management/home">
            <el-icon><Menu /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/management/user">
              <el-icon><Document /></el-icon>
              <span>用户信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/management/product">
              <el-icon><Document /></el-icon>
              <span>商品信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><Coin /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/management/order">
              <el-icon><Document /></el-icon>
              <span>订单信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item>
            <el-icon><SwitchButton /></el-icon>
            <el-popconfirm @confirm="confirm" title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
              <template #reference>
                <a href="javascript:;" style="color: #fff;">退出登录</a>
              </template>
            </el-popconfirm>  
          </el-menu-item>
        </el-menu>
      </div>

      <div style="flex: 1; background-color: #f8f8ff;min-height: calc(100vh - 75px);">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
const router = useRouter()
const userStore = useUserStore()
const confirm = () => {
  console.log('用户要退出登录了')
  // 退出登录业务逻辑实现
  // 1.清除用户信息 触发action
  userStore.clearUserInfo()
  // 2.跳转到登录页
  router.push('/login')
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.el-icon--right {
  color: #fff;
  /* background-color: #fff; */
}
/* .el-menu-item.is-active {
  background-color: #000 !important;
}

.el-menu-item:hover {
  color: #000;
} */

/* :deep .el-menu {
  background-color:#000;
  color: #fff;
}

:deep .el-menu-item:hover {
  background-color:#fff;
}

span {
  color: #fff;
}

span:hover {
  color: #000;
}

.el-icon {
  color: #fff;
}

.el-menu .el-icon:hover {
  color: #000;
} */
</style>